<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo1</title>
		<script type="text/javascript" src="js/threejs/three.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="retina"></div>
	</body>
	<script>
		//页面加载完成
		window.onload = function(){
			create();
		}
		
		function create(){
			initRender();//创建渲染器
			initCamera();//创建相机
			initLight();//创建光源
			initObject();//创建物体
			initScene();//创建场景
			render();//渲染
		}
		
		//渲染器
		var renderer;
		var width;
		var height;
		function initRender(){
			width = window.innerWidth;
			height = window.innerHeight;
			renderer = new THREE.WebGLRenderer({
				antialias:true,//抗锯齿开启
			})
			renderer.setSize(width,height);//设置渲染器宽高
			renderer.setClearColor('#000000',1.0);//设置背景颜色
			renderer.setPixelRatio(window.devicePixelRatio);//设置设备像素比
			document.getElementById('retina').appendChild(renderer.domElement);//把渲染器放入页面中
		}
		
		//相机
		var camera;
		var origPoint = new THREE.Vector3(0,0,0)
		function initCamera(){
			camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
			camera.position.set(200,400,600);//相机位置
			camera.up.set(0,1,0)//设置相机正方向
			camera.lookAt(origPoint);//设置相机视点
		}
		
		//光源
		var pointLight;
		var ambientLight;
		function initLight(){
			//点光源
			pointLight = new THREE.PointLight(0xffffff,1,2000);
			pointLight.position.set(70,112,98);
			//环境光
			ambientLight = new THREE.AmbientLight(0x333333);
		}
		
		//物体
		var cube;
		function initObject(font){
			var geometry = new THREE.BoxGeometry(100,100,100);
			var material = new THREE.MeshLambertMaterial({color:0xff0000});
			cube = new THREE.Mesh(geometry,material);
			cube.position.set(0,0,0)
		}
		
		//创建场景
		var scene;
		function initScene(){
			scene = new THREE.Scene();
			scene.add(pointLight);
			scene.add(ambientLight);
			scene.add(cube);
		}
		
		//渲染
		function render(){
			renderer.clear();
			renderer.render(scene,camera);
			cube.rotation.x += 0.005;
			cube.rotation.y += 0.005;
			requestAnimationFrame(render)
		}
	</script>
</html>
